import { defineComponent, ref, watch, type PropType } from 'vue'
import homeIcons from '../../assets'
import '../../styles/atlas-list.less'

interface IStyle {
  backgroundColor?: string // 内容框填充色
}

export default defineComponent({
  props: {
    // 卡片背景色
    cardStyle: {
      type: Object as PropType<IStyle>
    },

    selectStyle: {
      type: Number,
      default: 3
    }
  },
  setup(props) {
    const containText = ref<IStyle>({
      backgroundColor: '#FFF4F0'
    })
    const list = Array.from(Array(9), (v, k) => k)
    watch(
      props,
      () => {
        containText.value = Object.assign(containText.value, props.cardStyle)
      },
      { deep: true, immediate: true }
    )
    return () => (
      <div class="flex flex-wrap px-4 mt-4 gap-x-3 gap-y-4 atlas-list-contain">
        {list.map((item, index) => {
          return (
            <div class="relative flex flex-col items-center" key={index}>
              <div
                class={
                  props.selectStyle === 2
                    ? 'article_showdon  w-[163px] h-[218px] rounded'
                    : 'article_showdon  w-[106px] h-[141px] rounded'
                }
                style={containText.value}
              >
                <img src={homeIcons.atlas} alt="" class={props.selectStyle === 2 ? 'img-show' : 'w-[51px] img-show'} />
              </div>
              <span class="pt-2 text-sm text-black">图集名称</span>
              <span class="absolute top-0 right-0">
                <div class="free w-9 h-5 text-xs text-[#fff] text-center leading-5 " v-show={index % 2 === 0}>
                  免费
                </div>
                <div class="gold h-5 text-xs text-[#fff] text-center  px-2" v-show={index % 2 !== 0}>
                  <pay-circle-outlined style="margin-top: 3px" />
                  <span class="ml-[3px] leading-5">50</span>
                </div>
              </span>
            </div>
          )
        })}
      </div>
    )
  }
})
